 <!-- 
 *功能:列表自定义选择列  作者：宦力瑞
具体参数请参照props
 * 
-->
<template>
  <span style="float: right">
    <a @click="sync()"><a-icon type="sync" />刷新</a>
    <a-divider type="vertical" />
    <a-popover title="自定义列" trigger="click" placement="leftBottom">
      <template slot="content">
        <a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">
          <a-row style="max-width: 400px">
            <template v-for="(item, index) in defColumns">
              <template v-if="item.key != 'rowIndex' && item.dataIndex != 'action'">
                <a-col :span="12" :key="index">
                  <a-checkbox :value="item.dataIndex">{{ item.title }}</a-checkbox>
                </a-col>
              </template>
            </template>
          </a-row>
        </a-checkbox-group>
      </template>
      <a><a-icon type="setting" />数据项选择</a>
    </a-popover>
  </span>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'CustomColList',
  props: {
    //刷新
    refresh: {
      type: Function,
    },

    // 列表默认传入的列信息
    propsDefColumns: {
      type: Array,
      default: () => [],
    },
  },
  //列设置
  data() {
    return {
      settingColumns: [],
      defColumns: this.propsDefColumns,
      columns: [],
    }
  },
  created() {
    this.initColumns()
    // this.defColumns = this.propsDefColumns
  },
  methods: {
    sync() {
      this.$emit('refresh')
    },
    //列设置更改事件
    onColSettingsChange(checkedValues) {
      // var key = this.$route.name + ':colsettings'
      // Vue.ls.set(key, checkedValues, 7 * 24 * 60 * 60 * 1000)
      this.settingColumns = checkedValues
      const cols = this.defColumns.filter((item) => {
        if (item.key == 'rowIndex' || item.dataIndex == 'action') {
          return true
        }
        if (this.settingColumns.includes(item.dataIndex)) {
          return true
        }
        return false
      })
      this.columns = cols
      this.$emit('update:propsDefColumns', this.columns)
    },
    initColumns() {
      //权限过滤（列权限控制时打开，修改第二个参数为授权码前缀）
      //this.defColumns = colAuthFilter(this.defColumns,'testdemo:');

      // var key = this.$route.name + ':colsettings'
      // let colSettings = Vue.ls.get(key)
      let colSettings = null
      if (colSettings == null || colSettings == undefined) {
        let allSettingColumns = []
        this.defColumns.forEach(function (item, i, array) {
          allSettingColumns.push(item.dataIndex)
        })
        this.settingColumns = allSettingColumns
        this.columns = this.defColumns
      } else {
        this.settingColumns = colSettings
        const cols = this.defColumns.filter((item) => {
          if (item.key == 'rowIndex' || item.dataIndex == 'action') {
            return true
          }
          if (colSettings.includes(item.dataIndex)) {
            return true
          }
          return false
        })
        this.columns = cols
      }
    },
  },
}
</script>

<style lang="scss" scoped>
</style>